<template>
  <div class="swiper-wrapper" ref="outterRef">
    <div
      class="content-container"
      ref="contentRef"
      @mouseenter="mouseenterEvent()"
      @mouseleave="mouseleaveEvent"
    >
      <div
        class="item-style"
        ref="itemRef"
        v-for="item in dataList"
        :key="item"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定时器
      timer: null,
      // 循环的数据
      dataList: [
        1, 2, 3, 4, 5, 6, 7, 8, 9, 
      ],
      // 展示内容的高度
      config: {
        height: null,
      },
      // 轮训的时间
      dvtime: 100,
    };
  },
  mounted() {
    // 获取dom内容的高度
    this.initInfo();
    // 调用定时器
    this.initTimerInterval();
  },
  methods: {
    initInfo() {
      this.config.height =
        this.$refs.itemRef.clientHeight * this.dataList.length;
    },
    initTimerInterval() {
      this.clearEvent();
      this.timer = setInterval(() => {
        window.requestAnimationFrame(this.scroll);
      }, this.dvtime);
    },
    scroll: function () {
      const that = this;
      const DOM = this.$refs.outterRef;
      // 如果滚动到头则重新滚动
      if (
        DOM.scrollTop >
        this.config.height - this.$refs.outterRef.clientHeight
      ) {
        DOM.scrollTop = 0;
        setTimeout(() => {
          window.requestAnimationFrame(that.scroll);
        }, that.dvtime);
        return;
      }
      DOM.scrollTop++;
    },
    clearEvent() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    // 鼠标移入关闭定时器
    mouseenterEvent() {
      this.clearEvent();
    },
    // 鼠标移出重新调用定时器
    mouseleaveEvent() {
      this.initTimerInterval();
    },
  },
  beforeUnmount() {
    this.clearEvent();
  },
};
</script>

<style lang="less" scoped>
.swiper-wrapper {
  width: 600px;
  height: 500px;
  border: solid 1px blue;
  /*  默认是隐藏超出 */
  overflow: hidden;

  /* // 鼠标移入可滚动列表 */
  &:hover {
    overflow-y: scroll;
  }

  &::-webkit-scrollbar {
    width: 10px;
    height: 1px;
    display: none;
  }

  // 滚动条上的滚动滑块
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
  }

  // 滚动条背景轨道
  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ededed;
  }

  // 内容超出展示
  .content-container {
    overflow: visible;
    height: 100%;
    width: 100%;
    border: solid 1px red;
    transition: all 0.5s linear;

    .item-style {
      width: 100%;
      height: 100px;
      line-height: 40px;
      color: #000;
      border: solid 1px red;
    }
  }
}
</style>
